<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>会员登录页面</title>
    <base th:href="@{/}" href="/bookstore/"/>
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <script src="static/script/vue.js"></script>

  </head>
  <body>
    <div id="login_header">
      <a href="index.html">
        <img class="logo_img" alt="" src="static/img/logo.gif" />
      </a>
    </div>

    <!-- Vue的作用范围:开始 -->
    <div class="login_banner" id="app">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>
      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尊敬的会员</h1>
            </div>
            <!-- 在登录会员标签下加入错误回显div -->
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg" th:text="${errorMsg}"></span>
            </div>
            <div class="form">
              <form id="loginForm" action="user" method="post">
                <input type="hidden" name="method" value="doLogin" />
                <label>用户名称:</label>
                <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" v-model="username" name="userName" id="username"/>
                <br />
                <br />
                <label>用户密码:</label>
                <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" v-model="password" tabindex="1" name="userPwd" id="password"/>
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" @click="checkLogin()" />
              </form>
            </div>
              <div class="tit">
                <a href="pages/user/regist.html">立即注册</a>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Vue的作用范围:结束 -->

  <script>
      var vue = new Vue({
        "el":"#app",
        //注册失败后回显数据
        "data": {
          "user": {
            "username": "[[${param.userName}]]",
            "password": "",
            "errorMessage": ""
          }
        },
        "methods": {
          checkLogin() {
            //校验用户名和密码是否为空
            if (this.username == "") {
              this.errorMessage = "用户名不能为空"
              event.preventDefault()
              return
            } else if (this.password == "") {
              this.errorMessage = "密码不能为空"
              event.preventDefault()
              return
            }
          }
        }
      });
    </script>


    <div id="bottom">
      <span>
        Drimwai's BookStore.Copyright &copy;2021
      </span>
    </div>
  </body>
</html>
